<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Copyright 2002 John Clark Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts A copy of the license is included in the section entitled "GNU Free Documentation License"
<p><span xml:lang="en-US" lang="en-US">When writing a document, many authors want to be able to present that document in a variety of media and formats. AbiWord has a variety of file formats available for your use.</span></p>
<p><span xml:lang="en-US" lang="en-US">Often, a particular file format is naturally associated with a particular type of media. For example, HTML is naturally associated with presentation on the World Wide Web. If you are interested in presenting your document in a variety of media, there are issues of presentation which you should keep in mind. This tutorial discusses how to create "Web-Clean" AbiWord documents. A "Web-Clean" document is a document which will accurately be represented in HTML and which will be easy for you to modify for integration into your web-site.</span></p>
<h2><a name="structure" id="structure"><span xml:lang="en-US" lang="en-US">Word Processing versus Content Authoring</span></a></h2>
<p><span xml:lang="en-US" lang="en-US">When creating any document, there are two different approaches that an author can take. The first is a concentration on presentation, where the author manually edits the visual details of his or her document until happy with the way it looks. The second is a concentration on structure, where the author focuses on the content of the document, and then applies formatting based on what type of structure the content possesses.</span></p>
<p><span xml:lang="en-US" lang="en-US">In order to create a "Web-Clean" AbiWord document, you must engage in word processing while at the same time paying attention to the structure of the document which you are creating. A typical document consists of a variety of structures, such a headers, lists, paragraphs, and so on.</span></p>
<p>To demonstrate what I'm talking about, let's look at the example of creating a header in a document. Doing things the first way, concentrating on presentation, we would insert the cursor where we want the header, then select Bitstream Vera Serif for the font, 20 for the font size, and bold, for emphasis. Doing things the second way, concentrating on structure, we would select the style which best represents the structure we want from the drop down menu at the left of the Formatting toolbar. In this case, we would select "Heading 1", and then this section of the document would have the "Heading 1" style.</p>
<p><span xml:lang="en-US" lang="en-US">What we notice first, following the instructions above, is that when we apply the "Heading 1" style to our header, we do </span><span class="emphatic" style="">not</span><span xml:lang="en-US" lang="en-US"> have the formatting which we had when we manually formatted our header by the first method. By default, the built in formatting for the "Header 1" style is Arial, bold, 17 point font. This is just the default, however; styles give an author a great deal of control over the appearance of a document.</span></p>
<p><span xml:lang="en-US" lang="en-US">A style is simply a description of a structural element in your document, such as a header. Each style has an associated set of formatting instructions which apply to every element with that style. The author can then manipulate these formatting instructions to control the visual presentation of all elements with the given style.</span></p>
<h3><a name="important" id="important"><span xml:lang="en-US" lang="en-US">Why is this important?</span></a></h3>
<p><span xml:lang="en-US" lang="en-US">There are two main reasons why utilizing styles is important for the authoring of your documents. The utilization of styles allows you to make changes to the presentation of the document very easily. For instance, if you need to make all headers of a certain type bigger, you just adjust the formatting instructions for that header, and the change is applied throughout the document. To do this, go to </span><span class="guidoc" style="">Format > Style...</span><span xml:lang="en-US" lang="en-US"> to bring up the </span><a href="../interface/dialogstyles.html"><span class="guidoc" style="">Styles</span></a><span xml:lang="en-US" lang="en-US"> menu. Select the style you want to modify from the </span><span class="guidoc" style="">Available Styles</span><span xml:lang="en-US" lang="en-US"> list, and press </span><span class="guidoc" style="">Modify...</span><span xml:lang="en-US" lang="en-US"> to bring up the </span><span class="guidoc" style="">Modify Styles</span><span xml:lang="en-US" lang="en-US"> dialog. From this window you can access the presentation information associated with the style that you chose. As you can see, this technique is valuable for any type of document authoring. This concept of styles is also utilized in the export to HTML, so that if you need to edit your HTML separately, you can change the presentation of one style by easily editing the formatting instructions, known as Cascading Style Sheets.</span></p>
<p><span xml:lang="en-US" lang="en-US">Additionally, using styles and formatting instructions gathers all presentation information into a centralized location, which greatly simplifies the content of your document. This is particularly important when it comes to working with HTML, as you may need to work directly with the HTML markup at some point to integrate your document with your web-site.</span></p>
<p><span xml:lang="en-US" lang="en-US">By default, when you save your document as an HTML file, AbiWord places all formatting instructions into one block at the beginning. These formatting instructions use the Cascading Style Sheet language, and are in the <style> tag in the <head> of your document. From here it is easy to move the styles as a whole (copy and paste) into a new document which can then be externally linked or integrated with your web-site's style sheet.</span></p>
<p><span xml:lang="en-US" lang="en-US">Every time you press Enter or Return when you are editing an AbiWord document, you are creating a new content block in your document. In order to create Web-Clean AbiWord documents, you should try to have only one content block for every section of content in your document. </span><span xml:lang="en-US" lang="en-US">Examples of sections of content include paragraphs, headers, and items in a list.</span></p>
<p><span xml:lang="en-US" lang="en-US">For example many authors, when using a word processor, will manually insert whitespace between paragraphs by pressing Enter repeatedly. The amount of whitespace between paragraphs, however, is a detail about visual presentation which should be left to the formatting instructions of the paragraphs, as discussed in the section about styles, </span><a href="#styles"><span xml:lang="en-US" lang="en-US">above</span></a><span xml:lang="en-US" lang="en-US">.</span></p>
<p><span xml:lang="en-US" lang="en-US">You can also control indentation within paragraphs with formatting instructions. It is often tempting to control the specific indentation of sections of text with multiple spaces or tabs. In order to create Web-Clean documents, however, you should set the desired margins or indents using </span><a href="#styles"><span xml:lang="en-US" lang="en-US">formatting instructions</span></a><span xml:lang="en-US" lang="en-US"> or the margin stops in the ruler:</span></p>
<p style="text-align:left">Using this method enables the HTML to use the appropriate formatting instructions to properly indent the text, and saves you, the author, from having to repeatedly indent text manually.</p>
<p><span xml:lang="en-US" lang="en-US">As an author using AbiWord and interested in presenting your content as a web-page, there is one issue you should be aware of with respect to using images in your document. First, unlike AbiWord files, HTML files cannot store image information within the file itself. Rather, they must refer to separate image files. When you save an AbiWord file as an HTML file, then, all images are saved into a directory and referred to from there. If the name of the HTML file to which you are saving is </span><span class="command" style="" xml:lang="en-US" lang="en-US">filename.html</span><span xml:lang="en-US" lang="en-US">, then this directory will be called </span><span class="command" style="" xml:lang="en-US" lang="en-US">filename.html_d</span><span xml:lang="en-US" lang="en-US">. You will find all the images from your document in this directory.</span></p>
